<template>
	<div>
        <el-form ref="form" :model="form">
            <div class="baibeijing" style="width: 780px;">
                <el-form-item>
                    <div><fuwenben :content="form.description" :fwbDivIndex="this.descriptionIndex"  @getcontent="getcontent" v-if="relo"></fuwenben></div>
                </el-form-item>
            </div>
        </el-form>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
  import fuwenben from '@/components/fuwenben.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'bianjishangpin',
        components:{
        left,chuantu,fuwenben,top,topandleft,footers
        },
        props:{
            description:{
                type:Object,
                require:true
            },
            descriptionIndex:{
                type:Object,
                require:true
            }
        },
		data() {
		return {
        form:{
            description:''
        },
        options:[],
        props: {
          multiple: true
        },
        shangpinyeshow:false,//重要
        shoujiban:false,
        relo:true
		}
	  },
		created() {
        // console.log('this.description,this.descriptionIndex',this.description,this.descriptionIndex)
		},
		mounted() {

            if(window.screen.width < 1080){
                this.shoujiban = true
                var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;
            }else{

            }
            this.getFwbdescription(this.description)

		},
		methods: {
        getcontent:function(item){
            this.form.description = item
            const fonts = document.getElementsByTagName('font');
            for (let font of fonts) {
                const face = font.getAttribute('face');
                if (face) {
                    font.style.setProperty('font-family', `"${face}"`, 'important');
                    console.log(`修复字体: ${face}`);
                }
            }
        },
        //如果在商品资料页中点击编辑
        getFwbdescription(descriptions){
            console.log('descriptions8888')
            this.relo = false
            this.form.description = descriptions
            this.$nextTick(()=>{
              this.relo = true
            })
            console.log(this.form.description)

        }
	  }
	}
</script>


<style scoped lang="less">
  .bianjishangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{width: 72px;height: 26px; margin-right: 10px; border-radius: 5px; font-size: 12px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    /deep/ .el-form-item{ margin-bottom: 0;}

    /deep/ .el-switch__core{ width: 46px !important; height: 21px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
    /deep/ .el-switch.is-checked .el-switch__core {
        border-color: rgb(0, 90, 255) !important;
        background-color: rgb(0, 90, 255) !important;
    }
    /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -18px; left: 100% !important;}
    /deep/ .el-switch__core:after{ width: 17px; height: 17px;  top: 1px; left: 1px; background: rgb(227, 232, 241);}

    /deep/ .el-cascader{ width: 300px;}
  }

</style>
